import * as React from 'react'
import { Input, Button, Card, Form, Menu, Dropdown, Carousel, Icon, Checkbox, Alert } from 'antd'
import * as style from './login.less'
import { FormComponentProps } from 'antd/lib/form/Form'
import { api_login } from '../../service/api'


const FormItem = Form.Item

export interface State{
  status: string
  msg: string
  submitting: boolean
}
export interface Props{
  login: (user: any) => void
  history: any
}

class Login extends React.Component<Props & FormComponentProps, State>{
  constructor(props: Props & FormComponentProps) {
    super(props);
  }
  state = {
    status: '',
    msg: '',
    submitting: false
  }
  handleSubmit = (e: any) => {
    e.preventDefault();
    const { form } = this.props
    form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        api_login(values).then( res => {
          if(res.status == 'error') {
            this.setState({ status:"error", msg: res.errmsg })
          }else {
          const { token, accountInfo: { Id, Photo, TrueName, UserName, venderInfo } } = res
            this.props.login({
              id: Id,
              photo: Photo,
              tureName: TrueName,
              userName: UserName,
              role: 1,
              token: token,
              venderInfo
            })
            this.props.history.replace({pathname: "/index"})
          }
        })
      }
    })  
  }
  renderMessage = (message: string) => {
    return (
      <Alert style={{ marginBottom: 24 }} message={message} type="error"  showIcon />
    )
  }
  public render() {
    const { form } = this.props
    const { getFieldDecorator } = form
    const { status, msg, submitting } = this.state
    const menu = (
      <Menu>
        <Menu.Item key="0" style={{padding: "20px"}}>
          <span style={{fontSize: "17px" }}>电话：95017</span>
          <div style={{fontSize: "12px", color: "#999"}}>周一到周五 09:00-18:00</div>
        </Menu.Item>
      </Menu>
    )
    return (
      <div className={style.loginPage}>
        <div className={style.loginTopbar}>
          <div className={style.topbarTitle}>wego | 惠购供应链管理系统</div>
          <div className={style.topbarDrap}>
          <Dropdown overlay={menu} trigger={['hover']}>
            <span style={{cursor: "pointer"}}>帮助中心 <Icon type="down" /></span>
          </Dropdown>
          </div>
        </div>
        <div className={style.loginContent}>
          <Carousel autoplay>
            <div><img className={style.autoImg} src={require('../../assets/imgs/SCM-01.jpg')}></img></div>
            <div><img className={style.autoImg} src={require('../../assets/imgs/SCM-02.jpg')}></img></div>
            <div><img className={style.autoImg} src={require('../../assets/imgs/SCM-03.jpg')}></img></div>
          </Carousel>
          <Card title="用户登录" className={style.loginCard}>
            <Form onSubmit={this.handleSubmit}>
              {
                status === 'error'  &&
                this.renderMessage(msg)
              }
              <FormItem>
                {getFieldDecorator('username',{
                  initialValue: "000031",
                  rules: [{
                    required: true, message: '请输入账户名！',
                  }],
                })(
                  <Input size="large" prefix={<Icon type="user" />} placeholder="请输入账号" />
                )}
              </FormItem>
              <FormItem>
                {getFieldDecorator('password', {
                  initialValue: "123456",
                  rules: [{required: true, message: '请输入密码！', }],
                })(
                  <Input size="large" prefix={<Icon type="lock"/>} type="password" placeholder="请输入密码" />
                )}
              </FormItem>
              <FormItem>
                <Checkbox className={style.remLeft}>记住账号</Checkbox><span className={style.remLeft}>忘记密码？</span>
              </FormItem>
              <FormItem >
                <Button size="large" loading={submitting} className={style.submit} type="primary" htmlType="submit" block>
                  登录
                </Button>
              </FormItem>
            </Form>
          </Card>
        </div>
        <div className={style.loginFooter}>
          <div className={style.footCon}>Copyright &copy; 2018 深圳市惠购商业股份有限公司 All Rights Reserved</div>
        </div>
      </div>
    )
  }
}

export default Form.create()(Login)